<template>
  <!-- 用户抗位置泄露-大屏 -->
  <el-container ref="bigModel" class="main-model">
    <el-header>
      <Header :active-title="3" />
    </el-header>
    <el-main>
      <div class="home-model">
        <el-row style="height: 100%">
          <el-col :span="24" style="height: 100%">
            <div class="home-model-left">
              <div style="height: 100%; width: 100%">>
                <bkMap />
              </div>
            </div>
          </el-col>
        </el-row>
        <div class="rightModel" :style="{ width: rightModelShow ? '20%' : '1px' }">
          <img v-if="rightModelShow" :src="require('@/assets/xd/new/Group 1142813242.png')" alt="" class="rightJ"
            style="" @click="hideRightModel">
          <img v-else :src="require('@/assets/xd/new/Group 1142813263.png')" alt="" class="rightJ" style=""
            @click="showRightModel">
          <div v-show="rightModelShow" class="home-model-right">
            <div class="infoModel">
              <div class="infoTitle flex-container">
                用户位置泄露风险统计
                <!-- 跳转终端页面 -->
                <el-button type="text" @click="toalarmInformation" class="more">
                  更多
                </el-button>
              </div>
              <div class="infoContent" >
                <!-- <riskStatistics /> -->
                <barchart />
              </div>
            </div>
            <div class="infoModel">
              <div class="infoTitle flex-container">
                用户位置泄露风险告警
                <!-- 跳转终端页面 -->
                <el-button type="text" @click="toalarmInformation" class="more">
                  更多
                </el-button>
              </div>
              <div class="infoContent" :style="{ height: infoHeight + 'px' }">
            <list-scroll class="box" :speed="0">
              <div class="list">
                <div
                  class="infoItem1"
                  v-for="(item, index) in infoList"
                  :key="index"
                  @click="clickalarm(item)"
                >
                  <div class="_num">
                    {{ index + 1 }}
                  </div>
                  <div class="_cont">
                    {{ item.username }}---{{ item.locationPos }}
                  </div>
                </div>
              </div>
            </list-scroll>
          </div>
            </div>

            <div class="infoModel">
              <div class="infoTitle flex-container">
                用户抗定位任务列表
                <!-- 跳转终端页面 -->
                <el-button type="text" @click="toantiLocalization" class="more">
                  更多
                </el-button>
              </div>
              <!-- <taskLList /> -->
              <div class="infoContent" :style="{ height: infoHeight + 'px' }">
            <list-scroll class="box" :speed="0">
              <div class="list">
                <div
                  class="infoItem2"
                  v-for="(item, index) in infoList2"
                  :key="index"
                  @click="clickanti(item)"
                >
                  <div class="_num">
                    {{ index + 1 }}
                  </div>
                  <div class="_cont">
                    {{ item.method }}---{{ item.state }}---{{
                      item.targetLocation
                    }}
                  </div>
                </div>
              </div>
            </list-scroll>
          </div>
            </div>
          </div>
        </div>
      </div>
    </el-main>
  </el-container>
</template>

<script>
import Header from "@/views/largeScreen/components/header/index.vue";
import bkMap from "@/views/largeScreen/components/China/index.vue";
import ListScroll from "@/components/DtSrcollCopy2";

import riskStatistics from "./components/riskStatistics.vue"
import alarm from "./components/alarm.vue";
import taskLList from "./components/taskLList.vue";
import { detailsInfo, listWarn } from "@/api/combatUser/alarmInformation";
import { listTask } from "@/api/combatUser/antiLocalization";
import barchart from "./components/3DColumnChart2.vue";

export default {
  components: { Header, ListScroll, riskStatistics, bkMap, alarm, taskLList ,barchart},
  data() {
    return {
      rightModelShow: true,
      rightModelSpan: 7,
      leftModelSpan: 17,
      activeIndex: "1",
      activeIndex2: "1",
      formInline: {
        user: "",
        region: "",
      },
      infoList: [
        {
          content: "宁小宁，2846059400，存在家庭地址泄露",
        },
        {
          content: "404noence，3041184793，存在工作地址泄露",
        },
        {
          content: " 万理PKT，7800534882，存在工作地址泄露",
        },
        {
          content: "V-ersion，5638987914，存在家庭地址泄露",
        },
        {
          content: " _叶抱一，5083838438，存在家庭地址泄露",
        },
        {
          content: "  娱千千，7738694985，存在工作地址泄露",
        },
        {
          content: " 吃瓜群众CJ，1885688010，存在家庭地址泄露",
        },
        {
          content: "賣勾靠杯，5577340573，存在工作地址泄露",
        },
        {
          content: "宁小宁，2846059400，存在家庭地址泄露",
        },
        {
          content: "404noence，3041184793，存在工作地址泄露",
        },
        {
          content: " 万理PKT，7800534882，存在工作地址泄露",
        },
        {
          content: "V-ersion，5638987914，存在家庭地址泄露",
        },
        {
          content: " _叶抱一，5083838438，存在家庭地址泄露",
        },

      ],
      infoList2: [
        {
          content: "开心超人，4516561265，抗定位任务已完成",
        },
        {
          content: "UB6598，1353584514，抗定位任务已完成70%",
        },
        {
          content: "无敌王龙，8455874623，抗定位任务已完成60%",
        },
        {
          content: "吃瓜群众，1285634898，抗定位任务已完成50%",
        },
        {
          content: "世界和平，3648527445，抗定位任务完成40%",
        },
        {
          content: "海阔天空，8415274541，抗定位任务已完成30%",
        },
        {
          content: "HO，4514956665，抗定位任务已完成",
        },
        {
          content: "开心超人，4516561265，抗定位任务已完成",
        }
      ],
      map: "",
      // infoHeight: 300,
    };
  },
   async mounted() {
    this.infoHeight = (this.$refs.bigModel.$el.offsetHeight - 80) / 3;
    let that = this;
    //获取所有的告警列表
    let listWarnRes = await listWarn({ pageNum: 1, pageSize: 30 });
    if (listWarnRes.code == 200) {
      this.infoList = listWarnRes.rows;
      this.clickalarm(this.infoList[0])
    }
    //用户抗定位任务列表
    let listWarnRes2 = await listTask({ pageNum: 1, pageSize: 30 });
    if (listWarnRes2.code == 200) {
      this.infoList2 = listWarnRes2.rows;
    }
  },

  methods: {

    toantiLocalization() {
      this.$router.push("/networkUser/antiLocalization");
    },
    toantiLocalizationdetail() {
      this.$router.push("/userindexdetails");
    },
    toalarmInformation(){
      this.$router.push("/networkUser/alarmInformation");
    },
    hideRightModel() {
      this.rightModelShow = false;
      this.rightModelSpan = 0;
      this.leftModelSpan = 24;
    },
    showRightModel() {
      this.rightModelShow = true;
      this.rightModelSpan = 5;
      this.leftModelSpan = 19;
    },

    onSubmit() { },

     // 点击用户位置列表
     clickalarm(row){
      this.$router.push('/userPositioningScreen/details?id=' + row.id+'&userid='+row.userid)
    },
    // 点击用户定位列表
    clickanti(row){
      this.$router.push({path: '/userPositioningScreen/compare?id='+row.id+'&warnid='+row.warnid})
    },
  },
};
</script>
<style lang="scss" scoped>
.el-header {
  padding: 0;
  z-index: 5;
}

.mapModel {
  width: 100%;
  height: 100%;
}

.home-model-right {
  height: 30vh;
  border-radius: 5px;
  padding: 5px;
  padding-top: 10px;
}

.home-model-left {
  position: relative;
  height: 100%;
}

.home-model {
  position: relative;
  width: 100%;
  height: 100%;
}

.home-model-search {
  z-index: 100000;
}

.home-model-right {
  .infoModel {
    position: relative;
    height: 30vh;

    .infoTitle {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      background-image: url(~@/assets/xd/new/title.png);
      background-repeat: no-repeat;
      background-size: 100% 80%;
      color: #fff;
    }

    .infoBody {
      height: 100%;
      padding-top: 40px;
      box-sizing: border-box;
    }
  }
}

.rightModel {
  position: absolute;
  right: 0;
  top: 10px;
  width: vw(380);
  height: vh(960);
}
.infoContent{
  height: vh(300);
}
.rightJ {
  left: -40px;
}

.flex-container {
  display: flex;
  justify-content: space-between;
}

.btn {
  position: absolute;
  right: 20%;
  z-index: 999;
  font-size: 20px;
}

.main-model {
  background-image: url(~@/assets/xd/new/homebg.png);
  background-color: #094294;
  background-size: 100% 100%;
  background-repeat: no-repeat;
}

.more {
  color: #fff;
  font-size: 18px;
  font-weight: bold;
}
</style>
